<template>
  <div>
         <el-page-header  @back="$router.push('/ordermanagement')" content="订单详情" class="huidan" style="margin-bottom:20px">
         </el-page-header>
        <el-card>
            <el-row type="flex" justify="space-around" style="font-size: 14px; font-weight: 400;margin-bottom:20px;">
              <el-col>订单编号：{{form.id}}</el-col>
              <el-col>运单编号：{{form.transportOrder}}</el-col>
              <el-col>下单时间：{{form.estimatedArrivalTime}}</el-col>
              <el-col >订单状态：{{form.status===23000?'待取件':'已取件'}}</el-col>
            </el-row>
            <el-row style="font-size: 14px; font-weight: 400;">
              <el-col>预计到达日期：{{form.estimatedArrivalTime}}</el-col>
            </el-row>
        </el-card>
        <!--  -->
         <el-collapse  style="margin-top:20px" v-model="activeNames">
        <el-card >
  <el-collapse-item class="basic"  name="1">
    <template slot="title" ><span style="font-size: 16px;    font-weight: 700; color: rgb(42, 41, 41);">基本信息</span> </template>
    <el-row style="margin-top: 10px">
      <img src="../../../assets/yunshu.png" alt="" class="img-info1">
      <span class="fahuo">发货方</span>
    </el-row>
    <el-row type="flex" style="margin:20px 0 20px 38px;  ">
      <el-col>发货方姓名：{{form.senderName}}</el-col>
      <el-col>发货方电话：{{form.senderPhone}}</el-col>
    </el-row>
    <el-row type="flex" style="margin-left:38px;margin-bottom:22px;">
      <el-col v-if="form.senderProvince">发货方地址：{{form.senderProvince.name+form.senderCity.name+form.senderCounty.name}}</el-col>
      <el-col>  详细地址：{{form.senderAddress}}</el-col>
    </el-row>
     <el-row style="margin-top: 10px">
      <img src="../../../assets/shouhuofang.png" alt="" class="img-info2">
      <span class="fahuo">收货方</span>
    </el-row>
    <el-row type="flex" style="margin:20px 0 20px 38px;  ">
      <el-col>收货方姓名：{{form.receiverName}}</el-col>
      <el-col>收货方电话：{{form.receiverPhone}}</el-col>
    </el-row>
    <el-row type="flex" style="margin-left:38px;">
      <el-col v-if="form.receiverProvince">收货方地址：{{form.receiverProvince.name+form.receiverCity.name+form.receiverCounty.name}}</el-col>
      <el-col>  详细地址：{{form.receiverAddress}}</el-col>
    </el-row>
     <el-row style="margin-top: 10px">
      <img src="../../../assets/qizi.png" alt="" class="img-info2">
      <span class="fahuo">距离：{{form.distance}}km</span>
    </el-row>
<el-row style="margin-top: 10px;margin-left:18px;">
      <span class="fahuo">备注：暂无</span>
    </el-row>
  </el-collapse-item>
<el-collapse-item class="basic"  name="2">
    <template slot="title" ><span style="font-size: 16px;    font-weight: 700; color: rgb(42, 41, 41);">取件信息</span> </template>
    <el-row type="flex" style="margin:20px 0">
      <el-col v-if="form.taskPickup">所在网点：{{form.taskPickup.agency.name}}</el-col>
      <el-col>取件类型：{{form.pickupType===0?'上门取件' : '网点自寄'}}</el-col>
      <el-col>作业状态：{{form.pickupType===0?'新任务':'旧任务'}}</el-col>
      <el-col v-if="form.taskPickup">取件快递员：{{form.taskPickup.courier.name}}</el-col>
    </el-row>
    <el-row type="flex">
      <el-col v-if="form.taskPickup">快递员电话：{{form.taskPickup.courier.mobile}}</el-col>
      <el-col>预计取件时间：{{form.createTime}}</el-col>
      <el-col>取件完成时间：</el-col>
      <el-col></el-col>
    </el-row>
  </el-collapse-item>
  <el-collapse-item class="basic"  name="3">
     <template slot="title" ><span style="font-size: 16px;    font-weight: 700; color: rgb(42, 41, 41);">费用信息</span> </template>
    <el-row type="flex" style="margin-top:15px;">
      <el-col>运费：{{form.amount}}元</el-col>
      <el-col>支付方式：{{form.paymentMethod===1?'预结':'到付'}}</el-col>
      <el-col>付款状态：{{form.paymentStatus===1?'未付':'已付'}}</el-col>
    </el-row>
  </el-collapse-item>
   <el-collapse-item class="basic"  name="4">
     <template slot="title" ><span style="font-size: 16px;    font-weight: 700; color: rgb(42, 41, 41);">货品信息</span> </template>
         <el-table :data="tableData"  show-summary style="width: 100%" :header-cell-style="{background:'#f8faff',color:'#818693'}">
    <el-table-column type="index"  label="序号"  width="50"> </el-table-column>
    <el-table-column prop="name" label="货品名称" width="230"> </el-table-column>
    <el-table-column prop="name" label="货品类型" width="230"> </el-table-column>
    <el-table-column prop="name" label="重量(千克)" width="230"> </el-table-column>
    <el-table-column prop="name" label="体积(立方)" width="260"> </el-table-column>
    <el-table-column  label="操作">
       <template #default="{row}">
         <el-button  type="text" @click="edit(row.id)">编辑</el-button>
         <el-divider direction="vertical" ></el-divider>
          <el-button style="color:red"  type="text" @click="del(row.id)">删除</el-button>
        </template>
       </el-table-column>
    <!-- <el-table-column prop="amount3"   > </el-table-column> -->
  </el-table>
  </el-collapse-item>
        </el-card>
</el-collapse>
  </div>
</template>

<script>
import { getGoodsInfo, getOrderInfo } from '@/api/ordermanagement'
export default {
  name: 'orderInfo',
  data () {
    return {
      activeNames: ['1', '2', '3', '4'],
      list: [],
      tableData: [],
      userId: this.$route.params.id, // 拿到id
      form: {},
      orderId: null
    }
  },
  created () {
    this.getOrderInfoList()
  },
  methods: {
    async getOrderInfoList () {
      const res = await getOrderInfo(this.userId)
      console.log(res)
      this.form = res.data
      const re = await getGoodsInfo(this.userId)
      console.log(re)
    },
    // 取件类型
    pickupType: function (row) {
      if (row.pickupType === 1) {
        return '网点自寄'
      } else if (row.pickupType === 0) {
        return '上门取件'
      }
    }
  }
}
</script>

<style>
 /* ::v-deep .el-collapse-item__header is-active {
background-color: rgb(42, 41, 41);
} */
.basic {
    color: rgb(42, 41, 41);
    background: rgb(248, 250, 255) !important;
}
.img-info1 {
  width: 14px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
}
.img-info2 {
  width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
}
.fahuo {
  font-size: 16px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    color: rgb(32, 35, 42);
    line-height: 28px;
    margin-left: 15px;
    /* margin-bottom: 15px; */
}
.el-collapse-item__header {
  background-color: #f8faff;
  height: 60px;
  line-height: 60px;
}
</style>
